<script setup lang="ts">
import { onMounted, defineProps, ref } from "@vue/runtime-core";
import globalI18n from "@/components/globalI18n/index.vue";
import ColorModel from "@/components/colorModel/index.vue";
import { useI18n } from "vue-i18n";
import router from "@/router";
import { INavigations, getHeaderTabs } from '@/api/service/home'
const { t } = useI18n()
const navigations = [
  { name: t('message.navigator.home'), navigator: '/' },
  { name: t('message.navigator.product'), navigator: '/product' },
  { name: t('message.navigator.development'), navigator: '/development' },
  { name: t('message.navigator.news'), navigator: '/news' },
  { name: t('message.navigator.about_contact_us'), navigator: '/about_contact_us' }
] as INavigations[]

onMounted(async () => {
  const res = await getHeaderTabs()
})

const handlerPressTabs = (item: INavigations) => {
  router.push(item.navigator)
}
</script>

<template>
  <div class="wrapper">
    <div class="webpage">
      <div class="logo"><img src="@/assets/img/logo.png" alt=""></div>
      <div class="navigations">
        <p v-for="(item, idx) in navigations" @click="() => handlerPressTabs(item)" :key="idx">{{ item.name }}</p>
      </div>
      <div class="users">
        <globalI18n class="gloabl-i18n"></globalI18n>
        <ColorModel class="model-switch"></ColorModel>
      </div>
    </div>
    <!-- <div class="mobile-terminal"></div> -->
  </div>
</template>

<style scoped lang="less">
.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  margin: 0;

  .webpage {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    height: 100px;
    background: var(--header-bg-color);
    display: flex;
    flex-direction: row;

    .logo {
      width: 100px;
      height: 100%;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
      }
    }

    .users {
      width: 200px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .gloabl-i18n {
        width: 80px;
        padding: 0 20px;
      }

      .model-switch {
        width: 40px;
      }
    }

    @media screen and (min-width: 800px) {
      .navigations {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        p {
          margin: 0 10px;
          font-size: 16px;
          transition: all .5s ease;
          cursor: pointer;
        }

        p:hover {
          font-size: 18px;
          border-bottom: 3px solid red;
        }
      }
    }

  }
}
</style>